<template>
  <div class="app-container" style="width: 100%">
    <el-card class="box-card" style="width: 100%">
      <div slot="header" style="font-size: larger;text-align: center" class="clearfix">
        <span>报修信息</span>
      </div>
      <el-form ref="form" :model="formData" :rules="rules" size="medium" label-width="100px" label-position="left">
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="机井编号" prop="wellNumber">
              <el-tag style="width: auto">{{ this.message.wellNumber }}</el-tag>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="详细地址" prop="address">
              <span>{{ this.message.address }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="报修人" prop="reportName">
              <span>{{ this.formData.reportName }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="报修人号码" prop="reportTel">
              <span>{{ this.formData.reportTel }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="故障时间" prop="faultTime">
              <span>{{ this.formData.faultTime }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-col :span="24">
            <el-form-item label="故障原因" prop="faultCause">
              <span>{{ this.formData.faultCause }}</span>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row :gutter="15">
          <el-form-item label="故障图片" prop="reportImg">
            <div v-for="path in this.imgList">
              <el-image
                style="width: 100px; height: 100px"
                :src=path
                :preview-src-list="imgList"
              >
              </el-image>
            </div>


          </el-form-item>
        </el-row>
        <el-row :gutter="15">
          <el-form-item label="修复图片" prop="reportImg">

            <el-upload
              class="upload-demo"
              drag
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :on-error="handleError"
              :before-upload="beforeAvatarUpload"
              action="/dev-api/farmwell/fault/reportfile"
              multiple>
              <i class="el-icon-upload"></i>
              <div class="el-upload__text">将文件拖到此处，或<em>点击上传</em></div>
              <div class="el-upload__tip" slot="tip">只能上传jpg/png文件，且不超过50MB</div>
            </el-upload>
          </el-form-item>
        </el-row>
        <el-row :gutter="15">
          <el-col style="text-align: center" :span="24">
            <el-form-item size="large">
              <el-button type="primary" @click="open">已 解 决</el-button>
              <el-button @click="resetForm">返回</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
    </el-card>
  </div>
</template>

<script>
import {getWell} from "@/api/farmwell/well";
import {addFault, queryByIsFault} from "@/api/farmwell/fault";
import {updateFault} from "../../api/farmwell/fault";

export default {
  components: {},
  props: [],
  data() {
    return {
      data1: '35252',
      imgList: [],
      formData: {
        wellId: '',
        wellNumber: undefined,
        reportTime: null,
        reportName: null,
        faultTime: null,
        reportTel: undefined,
        reportImg: undefined,
        faultCause: undefined,
      },
      message: {},
      rules: {
        reportTel: [
          {
            required: true,
            message: '请输入报修人号码',
            trigger: 'blur',
          },
          {
            pattern: /^1(3|4|5|7|8|9)\d{9}$/,
            message: '手机号格式错误',
            trigger: 'blur',
          },
        ],

        reportTime: [
          {
            required: true,
            message: '请选择日期选择',
            trigger: 'change',
          },
        ],
        faultTime: [
          {
            required: true,
            message: '请选择时间选择',
            trigger: 'change',
          },
        ],
        reportName: [
          {
            required: true,
            message: '请输入上报人姓名',
            trigger: 'blur',
          },
        ],
        faultCause: [
          {
            required: true,
            message: '请输入故障信息',
            trigger: 'blur',
          },
        ],
      },
    };
  },
  computed: {},
  watch: {},
  created() {
    this.getMessage()
  },
  mounted() {
  },
  methods: {
    handleRemove(file, fileList) {
      const path= file.response.filePath;
      this.formData.remark.replace(path,'')
    },
    handleSuccess(response, file, fileList) {
      // 上传成功的回调
      if(this.formData.remark==null||this.formData.reportImg==''){
        this.formData.remark=response.filePath
      }else {
        this.formData.remark+=';'+response.filePath
      }
      console.log(this.formData.remark)
    },
    handleError(err, file, fileList) {
      // 上传失败的回调
    },
    beforeAvatarUpload(file) {
      // 检查文件类型是否为JPG或PNG
      const isJPG = file.type === 'image/jpeg';
      const isPNG = file.type === 'image/png';

      // 检查文件大小是否小于50MB
      const isLt50M = file.size / 1024 / 1024 < 50;

      // 组合验证结果
      const isValidType = isJPG || isPNG;
      const isValidSize = isLt50M;

      // 显示错误信息
      if (!isValidType) {
        this.$message.error('上传图片只能是 JPG/PNG 格式!');
      }
      if (!isValidSize) {
        this.$message.error('上传图片大小不能超过 50MB!');
      }

      // 必须同时满足类型和大小要求
      return isValidType && isValidSize;
    },
    /** 修改按钮操作 */ async getMessage() {

      // 从查询参数中获取名为 'param' 的值
      const paramValue = this.$route.params.id;
      await getWell(paramValue).then(response => {
        this.message = response.data;
        this.formData.wellId = response.data.id;
        this.formData.wellNumber = response.data.wellNumber;

      });
      await queryByIsFault(paramValue).then(response => {
        this.formData = response.data;
        const img = response.data.reportImg;
        const list = img.split(";")
        for (var i = 0; i < list.length; i++) {
          this.imgList.push('/prod-api' + list[i])
        }
      });

    },
    submitForm() {
      this.$refs['机井编号'].validate((valid) => {
        if (!valid) return;
        // TODO 提交表单
      });
    },
    open() {
      if(this.formData.remark==null||this.formData.remark==null)
      {
        this.$message({
          type: 'warning',
          message: '请上传修复图片'
        });
      }else {
        this.$confirm('确认提交？', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          updateFault(this.formData).then(response => {
            this.$message({
              type: 'info',
              message: '已提交'
            });
          });
          window.location.href = "http://111.6.105.59:8111/faultReport?param=" + this.formData.wellId
        }).catch(() => {
          this.$message({
            type: 'info',
            message: '已取消'
          });
        });
      }
    },
    resetForm() {
      window.location.href = "http://111.6.105.59:8111/faultReport?param=" + this.formData.wellId
    },
  },
};


</script>

<style>
.form-container {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 100px;

}
.el-upload-dragger {
  background-color: #fff;
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  width: 250px;
  height: 180px;
  text-align: center;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
</style>

